<template>
  <div class="container">
    <div class="search-form">
      <el-form :model="formPost" inline label-width="100px">
        <el-form-item label="博客标题">
          <el-input v-model="formPost.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="selectPost()">查询</el-button>
          <el-button type="primary" @click="selectPost('rest')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="currentData" border stripe>
        <el-table-column prop="PostID" label="博客ID" align="center"></el-table-column>
        <el-table-column prop="PostTitle" label="博客标题" align="center"></el-table-column>
        <el-table-column prop="UserName" label="发布用户" align="center"></el-table-column>
        <el-table-column prop="Post_Date" label="发布时间" :formatter="formatDate" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" @click="viewPostDetails(scope.row)">查看详情</el-button>
            <el-button link type="primary" @click="delPost(scope.row.PostID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination v-model:current-page="currentPage" :page-size="5" :total="postList.length" class="pagination"></el-pagination>
    </div>
  </div>

  <!-- 查看博客详情弹窗 -->
  <el-dialog v-model="dialogViewDetailsVisible" title="博客详情" width="500">
    <el-form :model="formView">
      <el-form-item label="博客ID">
        <el-input disabled v-model="formView.PostID" autocomplete="off" />
      </el-form-item>
      <el-form-item label="博客标题">
        <el-input disabled v-model="formView.PostTitle" autocomplete="off" />
      </el-form-item>
      <el-form-item label="博客内容">
        <el-input disabled v-model="formView.PostContent" autocomplete="off" type="textarea" :rows="4" />
      </el-form-item>
      <el-form-item label="用户ID">
        <el-input disabled v-model="formView.Post_UserID" autocomplete="off" />
      </el-form-item>
      <el-form-item label="用户名">
        <el-input disabled v-model="formView.UserName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="发布时间">
        <el-input disabled v-model="formView.Post_Date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="更新时间">
        <el-input disabled v-model="formView.Post_Update_Date" autocomplete="off" />
      </el-form-item>
      <el-form-item label="浏览量">
        <el-input disabled v-model="formView.Post_Views" autocomplete="off" />
      </el-form-item>
      <el-form-item label="点赞量">
        <el-input disabled v-model="formView.LikeCount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="分类">
        <el-input disabled v-model="formView.ColumnNames" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标签">
        <el-input disabled v-model="formView.TagNames" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogViewDetailsVisible = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { getPostListApi, delPostApi } from '../api/postApi';
import { ElMessageBox, ElMessage } from 'element-plus';

// 表单数据
const formPost = reactive({
  title: '' // 博客标题
});

// 博客列表数据
const postList = ref([]);

// 分页相关
const currentPage = ref(1);
const currentData = computed(() => {
  return postList.value.slice((currentPage.value - 1) * 5, currentPage.value * 5);
});

// 查看博客详情弹窗相关
const dialogViewDetailsVisible = ref(false);
const formView = reactive({
  PostID: '',
  PostTitle: '',
  PostContent: '',
  Post_UserID: '',
  Post_Date: '',
  Post_Update_Date: '',
  Post_Views: '',
  ColumnNames: '', // 分类信息
  TagNames: '', // 标签信息
  UserName: '',
  LikeCount: ''
});

// 查询博客列表
const selectPost = (rest) => {
  console.log("formPost:", formPost); // 打印 formPost 的值
  if (rest === 'rest') {
    formPost.title = ''; // 重置查询条件
  }
  getPostListApi(formPost).then(res => {
    if (res.status === 0) {
      postList.value = res.data; // 更新博客列表
    } else {
      ElMessage({
        type: 'error',
        message: res.message || '获取博客列表失败'
      });
    }
  }).catch(error => {
    ElMessage({
      type: 'error',
      message: '获取博客列表失败'
    });
  });
};

// 初始化加载博客列表
onMounted(() => {
  selectPost();
});

// 删除博客
const delPost = id => {
  ElMessageBox.confirm('是否要删除这篇博客', 'Warning', {
    confirmButtonText: '确定删除',
    cancelButtonText: '取消',
    type: 'warning'
  }) 
    .then(() => {
      delPostApi(id).then(resp => {
        if (resp.status === 0) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          });
          selectPost(); // 重新加载博客列表
        } else {
          ElMessage({
            type: 'error',
            message: resp.message || '删除失败'
          });
        }
      }).catch(error => {
        ElMessage({
          type: 'error',
          message: '删除失败'
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      });
    });
};

// 查看博客详情
const viewPostDetails = postItem => {
  dialogViewDetailsVisible.value = true;
  Object.assign(formView, {
    PostID: postItem.PostID,
    PostTitle: postItem.PostTitle,
    PostContent: postItem.PostContent,
    Post_UserID: postItem.Post_UserID,
    Post_Date: postItem.Post_Date,
    Post_Update_Date: postItem.Post_Update_Date,
    Post_Views: postItem.Post_Views,
    ColumnNames: postItem.ColumnNames, // 分类信息
    TagNames: postItem.TagNames, // 标签信息
    UserName: postItem.UserName,
    LikeCount: postItem.LikeCount
  });
};

// 格式化日期
const formatDate = (row, column, cellValue) => {
  if (!cellValue) return '-';
  const date = new Date(cellValue);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
};

</script>

<style scoped>
.container {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}

.content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.el-table {
  margin-top: 20px;
}

.el-button {
  margin-right: 10px;
}

.el-dialog {
  border-radius: 8px;
}

.el-tabs {
  margin-top: 20px;
}
</style>